<!--文章详情页面  -->
<script lang='ts' setup>
import discussVue from '@/components/discuss/discuss.vue';
import { axiosRequests } from "../../hooks/axiosRequest"
import { ref, watch } from 'vue'
import type { userContentAll } from "../../types/write"
const { userget } = axiosRequests()
const drawer = ref(true)
watch(drawer, (nw, ow) => {
    let box = document.getElementById('box')!
    if (!nw) {
        return box.style.transform = "translateX(-50%)";
    }
    box.style.transform = "translateX(-65%)";
})
const photo = new URL('../../assets/photo/photo.png', import.meta.url).href
//获取当前url的参数
let urlObj = <{ email: string | null, createtime: string | null }>{
    email: '',
    createtime: '',
}
const url = location.search
const a = new URLSearchParams(url)
urlObj.email = a.get('email')
urlObj.createtime = a.get('createtime')
//获取当前文章信息
const content = ref<Array<userContentAll>>([])
getContent()
async function getContent() {
    const result = await userget('/email/writeArticle/getArticle?email=' + urlObj.email + '&createtime=' + urlObj.createtime, {})
    result.data.forEach((e: userContentAll) => {
        content.value.push(e)
    });
}
</script>
<template>
    <div id="box">
        <!--   左边发帖人信息 和其他信息-->
        <div class="userInfo">
            <div class="block borderStyle">
                <el-avatar :size="50" :src="photo" />
                <div
                    style="display:flex;flex-direction: column;justify-content: center;margin-left: 5px; color:gray ;font-size: 16px;">
                    <span>{{ content[0].nickname }}</span>
                    <span>look龄:<i>520</i></span>
                </div>
            </div>
            <div class="userInfo_items">
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">99</span>
                    <span>原创</span>
                </div>
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">1</span>
                    <span>周排名</span>
                </div>
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">1111</span>
                    <span>总排名</span>
                </div>
            </div>
            <div class="userInfo_items">
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">99</span>
                    <span>积分</span>
                </div>
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">1</span>
                    <span>粉丝</span>
                </div>
                <div class="items_con">
                    <span style=" color:rgb(74, 77, 82); ">1111</span>
                    <span>获赞</span>
                </div>
            </div>
            <div class="userInfo_botton">
                <el-button round style="width: 110px;">私信</el-button>
                <el-button round style="width: 110px;">关注</el-button>
            </div>
            <div class="wrapper">
                <p>风向</p>
                <div class="direction-switcher">
                    <input type="radio" name="direction" id="left" />
                    <label for="left">Left</label>

                    <input type="radio" name="direction" id="none" checked />
                    <label for="none">None</label>

                    <input type="radio" name="direction" id="right" />
                    <label for="right">Right</label>
                    <span class="slider"></span>
                </div>
            </div>
            <div id="discuss">
                <el-button type="primary" style="margin-left: 16px" @click="drawer = true">
                    <b>评论</b>
                </el-button>
                <el-drawer v-model="drawer" :size="500" :lock-scroll="false" title="欢迎讨论(ESC可实现快速关闭)"
                    :close-on-click-modal="false" :modal="false" :append-to-body="true">
                    <discuss-vue :beloneTo="content[0].count"></discuss-vue>
                </el-drawer>
            </div>
        </div>
        <!--     内容区 -->
        <div class="contents scrollStyle">
            <h2>{{ content[0].title }}</h2>
            <div class="contentIntroDuce">
                <div>
                    <span class="conIt">nickname</span>
                    <span class="conIt">
                        <el-icon style="vertical-align: -3px;">
                            <Edit />
                        </el-icon>
                        tiem:<i>{{ content[0].createtime }}</i>
                    </span>
                    <span class="conIt">
                        <el-icon style="vertical-align: -2px; font-size: 16px;">
                            <View />
                        </el-icon>
                        <span>11111</span>
                    </span>
                    <span class="conIt">
                        <el-icon style="vertical-align: -3px; font-size: 18px;">
                            <StarFilled />
                        </el-icon>
                        <span> 收藏 <i>9999</i></span>
                    </span>
                </div>
                <div>
                    <span class="conIt" style="font-size: 16px;">文章标签:
                        <el-button size="small" style="color:rgb(153, 179, 210);"
                            v-for="item in JSON.parse(content[0].showLabels)">
                            {{ item }}
                        </el-button>
                    </span>
                </div>
            </div>
            <!-- 这是内容 -->
            <div style="margin-top: 20px;" v-html="content[0].content"></div>
        </div>
    </div>
</template>
<style lang='scss' scoped>
#discuss {
    padding: 20px;
    border-radius: 10px;
    background-color: red;
}

#box {
    position: fixed;
    display: flex;
    left: 50%;
    transform: translateX(-65%);
    width: 78.125rem;
    height: 100vh;
    color: black;
    z-index: 9999;

    .userInfo {
        width: 280px;
        padding: 20px;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0.9);

        .block {
            display: flex;
        }

        .userInfo_items {
            display: flex;
            padding: 20px 0px;
            border-bottom: 1px solid rgba(143, 140, 140, 0.123);

            .items_con {
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 60px;
                font-size: 16px;
            }
        }

        .userInfo_botton {
            margin-top: 20px;
            text-align: center;
        }
    }

    .contents {
        width: 100%;
        height: 100%;
        margin: 0 10px;
        border-radius: 8px;
        padding: 20px;
        background-color: rgba(255, 255, 255, 0.9);
        overflow: auto;

        .contentIntroDuce {
            padding: 5px 10px;
            margin-top: 15px;
            border-radius: 5px;
            background-color: rgba(248, 248, 248);

            .conIt {
                margin-right: 15px;
                font-size: 14px;
                color: rgb(153, 179, 210);

            }
        }

    }

}

/* #box {
    position: relative;
    margin: 10px auto;
    height: 1500px;
    width: 80%;
    color: black;

    .userInfo {
        position: fixed;
        width: 280px;
        padding: 20px;
        border-radius: 5px;
        background-color: rgb(240, 236, 237);

        .block {
            display: flex;
        }

        .userInfo_items {
            display: flex;
            padding: 20px 0px;
            border-bottom: 1px solid rgba(143, 140, 140, 0.123);

            .items_con {
                display: flex;
                flex-direction: column;
                text-align: center;
                width: 60px;
                font-size: 16px;
            }
        }

        .userInfo_botton {
            margin-top: 20px;
            text-align: center;
        }
    }

    .contents {
        position: absolute;
        left: 280px;
        margin: 0 10px;
        border-radius: 5px;
        padding: 20px;
        background-color: rgb(252, 252, 252);

        .contentIntroDuce {
            margin-top: 15px;
            border-radius: 5px;
            background-color: rgb(248, 248, 248);

            .conIt {
                margin-right: 15px;
                font-size: 14px;
                color: rgb(153, 179, 210);

            }
        }
    }
} */
</style>
